import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Icon, Divider, Button, Popconfirm, message } from 'antd'
import styles from './Header.less'

export default class extends React.PureComponent {

  static propTypes = {
    project_id: PropTypes.number,
    project_status: PropTypes.number,
    project_name: PropTypes.string,
    owner_name: PropTypes.string,
    starttime: PropTypes.number,
    endtime: PropTypes.number,
    finishtime: PropTypes.number,
    day: PropTypes.number,
    fetchProfile: PropTypes.func
  }

  static defaultProps = {
    project_id: 0,
    project_status: 0,
    project_name: '',
    owner_name: '',
    starttime: 0,
    endtime: 0,
    finishtime: 0,
    day: 0,
    fetchProfile: () => {}
  }

  render() {
    const { project_id, project_name, owner_name, project_status, starttime, endtime, finishtime, day, fetchProfile } = this.props

    let renderButton = null
    switch (project_status) {
      case 1:
        renderButton = 
          <Popconfirm
            title="确认提交？"
            onConfirm={() => message.warn('需要新增接口')}
            okText="确认"
            cancelText="取消"
          >
            <Button type="primary">进行中</Button>
          </Popconfirm>
        break
      case 2:
        renderButton = <Button type="success">已完成</Button>
        break
      case 3:
        renderButton = <Button type="gray">已终止</Button>
        break
      default:
        break
    }

    return (
      <header className={styles.header}>
        <section>
          <Icon type="appstore" theme="twoTone" style={{fontSize: 18, verticalAlign: 'middle'}} />
          <h3>{project_name}</h3>
        </section>
        <section>
          发起人：
          <b>{owner_name}</b>
          <Divider type="vertical" />
          开始时间：
          <b>{moment(starttime).format('LL')}</b>
          <Divider type="vertical" />
          计划交付时间：
          <b>{moment(endtime).format('LL')}</b>
          <Divider type="vertical" />
          实际交付时间：
          <b>{finishtime ? moment(Number(finishtime) * 1000).format('LL') : '待定'}</b>
          <Divider type="vertical" />
          延期
          <b> {day} </b>天
        </section>
        <hgroup style={{ textAlign: 'right' }}>
          {renderButton}                        
          <Button onClick={() => fetchProfile({project_id})} type="primary" ghost icon="profile" style={{ marginLeft: 12 }}>
            详情
          </Button>
        </hgroup>
      </header>
    )
  }
}